<template>

    <el-main>
        <!-- 查询条件 -->
        <el-form
                :model="searchModel" 
                ref="searchForm"
                label-width="80px"
                :inline="true"
                size="small"
                >
                <el-form-item  label="图标名称">
                      <el-input v-model="icon_obj.icon_name"></el-input>
                </el-form-item>     
                <el-form-item>
                      <el-button icon="el-icon-search" type="primary" >查询</el-button>
                      <el-button icon="el-icon-delete" @click="resetValue()">重置</el-button>
                      <el-button icon="el-icon-plus" size="small" type="success" @click="openAddWindow()">新增</el-button>
                  </el-form-item>
        </el-form>

        <!-- 添加和编辑用户窗口 -->
        <system-dialog
                    :title="iconDialog.title"
                    :height="iconDialog.height"
                    :width="iconDialog.width"
                    :visible="iconDialog.visible"
                    @onClose="onClose"
                    @onConfirm="onConfirm">
                        <div slot="content">
                            <el-form
                            :model="icon_obj"
                            ref="iconForm"
                            label-width="80px"
                            :inline="true"
                            size="small">
                                <el-form-item  label="图标名称">
                                    <el-input v-model="icon_obj.icon_name"></el-input>
                                </el-form-item>
                                <el-form-item  label="图标地址">
                                  <el-input v-model="icon_obj.url"></el-input>
                                  
                                </el-form-item>
                                <br>
                                <!-- 用户头像 -->
                                <el-form-item label="头像">
                                    <el-upload
                                    :show-file-list="false"
                                    :on-success="handleIconSuccess"
                                    :before-upload="beforeIconUpload"
                                    class="avatar-uploader"
                                    :data="uploadHeader"
                                    action="http://localhost:5577/api/oss/file/upload?module=url"
                                    >
                                        <img v-if="icon_obj.url" :src="uicon_obj.url">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"/>
                                    </el-upload>
                                </el-form-item>

                                
                            </el-form>
                        </div>
                    </system-dialog>


      <div class="icons-container">


        <el-tabs type="border-card">
          <el-tab-pane label="Icons">
            <div class="grid">
              <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
                <el-tooltip placement="top">
                  <div slot="content">
                    {{ generateIconCode(item) }}
                  </div>
                  <div class="icon-item">
                    <svg-icon :icon-class="item" class-name="disabled" />
                    <span>{{ item }}</span>
                  </div>
                </el-tooltip>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="Element-UI Icons">
            <div class="grid">
              <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
                <el-tooltip placement="top">
                  <div slot="content">
                    {{ generateElementIconCode(item) }}
                  </div>
                  <div class="icon-item">
                    <i :class="'el-icon-' + item" />
                    <span>{{ item }}</span>
                  </div>
                </el-tooltip>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

    </el-main>


  
</template>

<script>
import clipboard from '@/utils/clipboard'
import svgIcons from './svg-icons'
import elementIcons from './element-icons'
 //导入对话框组件
import SystemDialog from '@/components/system/Systemdialog'
//导入token
import {getToken} from '@/utils/auth'

export default {
  name: 'Icons',
  components:{
    SystemDialog
  },
  data() {
    return {
      svgIcons,
      elementIcons,
      //查询条件对象
      searchModel: {
                icon_name: "",

            },
      //图标对象
      icon_obj: {
                icon_name: '',
                url: '',
             
            },

       //添加和修改用户窗口属性
       iconDialog: {
                    title: '新增图标',
                    height: 280,
                    width: 610,
                    visible: false
                }, 

      //上传需要携带的数据
      uploadHeader:{"Authorization":getToken()},          
            
    }
  },
  methods: {
    generateIconCode(symbol) {
      return `<svg-icon icon-class="${symbol}" />`
    },
    generateElementIconCode(symbol) {
      return `<i class="el-icon-${symbol}" />`
    },
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    /**
    * 打开添加窗口
    */
    openAddWindow() {
        this.$resetForm('iconForm', this.icon_obj) //清空表单
        this.iconDialog.visible = true //显示窗口
        this.iconDialog.title = '新增图标' //设置标题
    },
                 
    /*窗口关闭事件*/
    onClose(){
        this.iconDialog.visible=false;
      },
    /*窗口确认事件*/
    onConfirm(){
        this.iconDialog.visible=false;
    }, 

   /**
    * 上传成功回调
    * @param res
    * @param file
    */
    handleIconSuccess(res, file) {
        this.icon_obj.url = res.data
        console.log('刷新图像...')
        // 强制重新渲染
        this.$forceUpdate()
    },
    /**
    * 上传校验
    * @param file
    * @returns {boolean}
    */
    beforeIconUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isLt2M
    },








  }
}
</script>

<style lang="scss" scoped>
.icons-container {
  margin: 10px 20px 0;
  overflow: hidden;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .icon-item {
    margin: 20px;
    height: 85px;
    text-align: center;
    width: 100px;
    float: left;
    font-size: 30px;
    color: #24292e;
    cursor: pointer;
  }

  span {
    display: block;
    font-size: 16px;
    margin-top: 10px;
  }

  .disabled {
    pointer-events: none;
  }
}

//用户头像
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9 !important;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar-uploader img {
width: 178px;
height: 178px;
display: block;
}
</style>
